<template>
    <div class="inbox">
        <div class="inleft">
            <h1>部门</h1>
            <div class="deps" v-for="i in deps" :key="i._id" @click="de(i._id)"
                :class="i._id == checkcolor ? 'deps1' : 'deps'">{{
                    i.dname }}</div>
        </div>
        <div class="inright">
            <div class="intop">
                <div>
                    <input type="text" class="intinp" v-model="text"/><button class="button1" @click="()=>{
                        getstaff()
                    }"><el-icon>
                            <Search />
                        </el-icon></button>
                    <button class="button2" @click="qb" >全部</button><button @click="xs" class="button3">我的直属下属</button><button @click="xs" 
                        class="button4">全部下属</button>
                </div>
                <button class="button5" >导出</button>
            </div>
            <vxe-table border :sort-config="sortConfig" stripe :data="staffs" @sort-change="sortChangeEvent"
                max-height="700px" :row-config="{ isCurrent: true, isHover: true }">
                <vxe-column align="right" type="seq" width="50px" height="10px"></vxe-column>
                <vxe-column title="头像" align="center">
                    <template #default="scope">
                        <img :src="scope.row.img">
                    </template>
                </vxe-column>
                <vxe-column field="name" title="姓名" align="center" sortable></vxe-column>
                <vxe-column field="did.dname" title="部门"></vxe-column>
                <vxe-column field="job" title="职位" align="center" sortable></vxe-column>
                <vxe-column field="phone" title="办公电话" align="center" width="201px"></vxe-column>
                <vxe-column field="tel" title="手机号" align="center" width="201px"></vxe-column>
                <vxe-column field="emil" title="邮箱" align="center" width="201px"></vxe-column>
                <vxe-column field="sort" title="排序号" align="center" sortable></vxe-column>
                <vxe-column title="在线状态" sortable align="center">
                    <template #default="scope">
                        <button v-show="scope.row.status" class="button6">在线</button>
                        <button v-show="!scope.row.status" class="button7">离线</button>
                    </template>
                </vxe-column>
                <vxe-column align="center">
                    <template #default="scope">
                        <button class="button8"> <el-icon>
                                <ChatRound />
                            </el-icon> 在线</button>

                    </template>
                </vxe-column>
                <template #empty>
                    <span style="color: red;">
                        <img src="https://img.soogif.com/py0BuorZDUJfg9Se93BDgbSu52UCMdWD.gif">
                        <p>没有更多数据了！</p>
                    </span>
                </template>

            </vxe-table>

            <Fy ref="data" name="getstaff"></Fy>
        
        </div>
    </div>
</template>

<script lang="ts" setup>
import Fy from './Fy.vue'
import { ref, onMounted } from 'vue'
import axios from 'axios';
import { VxeTablePropTypes, VxeTableEvents } from 'vxe-table'
axios.defaults.baseURL = 'http://127.0.0.1:3000/mine'

let text =ref('')
interface RowVO {
    name: string
    role: string
    sex: string
    age: number
    content: string
}
const sortConfig = ref<VxeTablePropTypes.SortConfig<RowVO>>({
    multiple: true
})


const sortChangeEvent: VxeTableEvents.SortChange<RowVO> = ({ sortList }) => {
    console.info(sortList.map((item) => `${item.field},${item.order}`).join('; '))
}
let staffs = ref<RowVO[]>([])
let data=ref(JSON.parse(localStorage.getItem('data'))||[])
let deps = ref([])
let x = ref<any>('')
let getdep = () => {
    axios.get('/getdep').then(res => {
        deps.value = res.data.data
    })
}


let getstaff = () => {
    axios.get(`/getstaff?did=${checkcolor.value}&x=${x.value}&name=${text.value}`).then(res => {
        staffs.value = res.data.data

    })
}
let xs = () => {
    x.value = true
    getstaff()
}
let checkcolor = ref('')
let de = (id) => {
    checkcolor.value = id
    getstaff()
}
let qb= () => {
    x.value = ''
    checkcolor.value = ''
    text.value=''
    getstaff()
    
}
onMounted(() => {
    getdep()
    getstaff()
    
})

</script>

<style  scoped>
.inbox {
    display: flex;
    width: 100%;
    background-color: #fff;
    padding: 20px;
}

.intop {
    display: flex;
    justify-content: space-between;
}

.intinp {
    border: 1px solid #CCCCCC;
    height: 38px;
    width: 232px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.button1 {
    background-color: #fff;
    border: 1px solid #CCCCCC;
    width: 43px;
    height: 38px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.button5 {
    width: 60px;
    height: 38px;
    background-color: #fff;
    border: 1px solid #CCCCCC;
    width: 43px;
    border-radius: 5px;
}

button:hover {
    background-color: #ccc;

}

.button2 {
    margin-left: 20px;
    background-color: #fff;
    border: 1px solid #CCCCCC;
    width: 59px;
    height: 38px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.button3 {
    background-color: #fff;
    border: 1px solid #CCCCCC;
    width: 106px;
    height: 38px;
}

.button4 {
    background-color: #fff;
    border: 1px solid #CCCCCC;
    width: 91px;
    height: 38px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.button6 {
    background-color: #5CB85C;
    border: 1px solid #CCCCCC;
    width: 38px;
    height: 22px;
    border-radius: 3px;
}

.button7 {
    background-color: #CCCCCC;
    border: 1px solid #CCCCCC;
    width: 38px;
    height: 22px;
    border-radius: 3px;
}

.button8 {
    background-color: #428BCA;
    border: 1px solid #428BCA;
    width: 70px;
    height: 25px;
    border-radius: 3px;
    color: #fff;
}

.button8:hover {
    background-color: #428BCA;
    border: 1px solid #428BCA;
    width: 70px;
    height: 25px;
    border-radius: 3px;
    color: #fff;
    line-height: 25px;
}


.inleft {
    height: 100vh;
    width: 241px;
    border: 2px solid #CCCCCC;

}



.inright {
    margin-left: 10px;
    height: 99vh;
    width: 85%;
    margin-bottom: 30px;
}

h1 {
    border-bottom: #CCCCCC 2px solid;
    height: 42px;
    line-height: 42px;
    padding-left: 10px;
    font-weight: 900;
}

.deps {
    border-bottom: #CCCCCC 2px solid;
    height: 42px;
    line-height: 42px;
    padding-left: 20px;
}

.deps:hover {
    background-color: #CCCCCC;
    border-bottom: #CCCCCC 2px solid;
    height: 42px;
    line-height: 42px;
    padding-left: 20px;
}

img {
    width: 50px;
    height: 50px;
}

.deps1 {
    background-color: #DFF0D8;
    border-bottom: #CCCCCC 2px solid;
    height: 42px;
    line-height: 42px;
    padding-left: 20px;
}
</style>